<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {NAMESPACE_MENU} from "../../interface/menu.ts";
import {createMenu} from "../../api/menu.ts";
import {messageTip, MessageTipType} from "../../util/common.ts";

const dialogFormVisible = ref<boolean>()
const currentMenu = ref<NAMESPACE_MENU.MenuBase>({
  state:1,
})
const operateResult = ref<boolean>(false)

const formLabelWidth = '140px'
const handleAddMenu = ()=>{
  createMenu(currentMenu.value).then(data=>{
    if (data.data){
      messageTip("添加成功",MessageTipType.SUCCESS)
      dialogFormVisible.value = false
      operateResult.value = true
    }else {
      messageTip(data.message,MessageTipType.ERROR)
    }
  })
}

const props = defineProps<{
  dialogFormVisible:boolean
}>()
onMounted(()=>{
  dialogFormVisible.value = props.dialogFormVisible
})

const emit = defineEmits(['closeDialog'])

watch(() => dialogFormVisible.value,(value)=>{
  if (!value){
    emit('closeDialog',operateResult.value)
  }
})

</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="添加菜单" width="30%" center >
    <el-form :model="currentMenu">
      <el-form-item label="父菜单ID" :label-width="formLabelWidth">
        <el-input  type="number"   v-model.number="currentMenu.parentId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="菜单名称" :label-width="formLabelWidth">
        <el-input  v-model="currentMenu.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="菜单路由" :label-width="formLabelWidth">
        <el-input  v-model="currentMenu.route" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="菜单图标" :label-width="formLabelWidth">
        <el-input  v-model="currentMenu.icon" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="currentMenu.intro" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="currentMenu.state" placeholder="Please select a state">
          <el-option label="正常状态" :value="1"/>
          <el-option label="锁定状态" :value="-1"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddMenu">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>